<template>
  <div>
    <van-nav-bar title="洗车记录" left-text="首页" right-text="退出" @click-left="onClickLeft" @click-right="onClickRight"/>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-collapse v-model="activeNames" v-for="(item,index) in list" :key="index">
        <van-collapse-item :name="index" :disabled="item.remark ? false : true">
          <template #title>
            <van-row>
              <van-col span="7" style="text-align: left;">消费{{item.fee}}元</van-col>
              <van-col span="17" style="text-align: right;">{{item.startDateTime}}-{{item.endDateTime ? item.endDateTime.substring(11) : ''}}</van-col>
            </van-row>
          </template>
          <van-row>
            <van-col span="24" style="text-align: left; color:#323233">{{item.remark}}</van-col>
          </van-row>
        </van-collapse-item>
      </van-collapse>
    </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
export default {
  data(){
    return{
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
      page: 0,
      activeNames:[]
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name:'index'
      })
    },
    onClickRight() {
      if(localStorage.getItem('token')){
        this.$api.logout().then(resp=>{
          if(resp.code == 0){
            localStorage.removeItem('openId')
            localStorage.removeItem('token')
            this.$router.push({
              name:'login'
            })
          }
        })
      }else{
        this.$router.push({
          name:'login'
        })
      }
    },
    onRefresh(){
      this.page = 0
      this.list = []
      this.finished = false
      this.loading = true
      this.onLoad()
    },
      onLoad() {
      this.page++
      let params = {
        page: this.page,
        limit: 10
      }
      this.$api.billHis(params).then(resp=>{
        if(resp.code == 0){
          this.isLoading = false
          resp.page.list.forEach(e => {
            this.list.push(e)
          })
          this.loading = false
          if(this.list.length >= resp.page.totalCount){
              this.finished = true
          }
        }
      })
    },
  },
}
</script>
<style scoped>
.box{
  margin: 0 10px;
  display: flex;
  box-sizing: border-box;
  width: calc(100% - 20px);
  padding: 10px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
  border-bottom: 1px solid #ebedf0;
}
</style>
